<template>
    <ul>
        <li :style="{opacity:opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>
<script>
export default {
    name: "News",
    data(){
        return {
            opacity:"1",
            timer:0
        }
    },
    methods:{
    },
    computed:{
    },
    // destroyed() {
    //     console.log("news 即将被销毁");
    //     clearInterval(this.timer)
    // },
    // mounted() {
    //     this.timer = setInterval(() => {
    //         console.log('@');
    //         this.opacity -= 0.01
    //         if(this.opacity <= 0) this.opacity = 1
    //     },16)
    // }
    deactivated() {
        console.log("news deactivated");
        clearInterval(this.timer)
    },
    activated() {
        console.log("news activated");
        this.timer = setInterval(() => {
            // console.log('@');
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
        },16)
    }


}
</script>

<style>
</style>
